<template>
	<view class="content">
		<view class="top">
			<view class="header">
				<image src="../../static/finish.jpg" mode=""></image>
				<view class="ml_20">
					<view class="fs_36 bold" >支付成功</view>
					<view class="fs_28">感谢您的购买</view>
				</view>
			</view>
			<view class="bar"></view>
			<view class="info">
				<view class="info_t">
					<text>￥</text>
					<text class="fs_48">{{pay_fee}}</text>
				</view>
				<!-- <view class="fs_28 mt_70">
					<view>订单编号: 8659532485222</view>
					<view class="mt_30">下单时间: 2020-04-24</view>
					<view class="mt_30">支付方式: 微信支付</view>
				</view> -->
			</view>
		</view>
		<view class="btn">
			<view class="green" @tap="toIndex">
				首页商城
			</view>
			<view class="ml_50" @tap="toOrder">
				个人中心
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				pay_fee:0
			}
		},
		onLoad:function(option){
			this.pay_fee=option.pay_fee
		},
		methods:{
			toIndex() {
				uni.reLaunch({
					url:'../index/index'
				})
			},
			toOrder() {
				uni.reLaunch({
					url:'/pages/my/my'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f8f8f8;
	}
	.top {
		overflow: hidden;
		height: 320rpx;
		position: relative;
		background-color: #40b312;
	}
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 100rpx 0 70rpx;
		color: #FFFFFF;
		image {
			width: 90rpx;
			height: 90rpx;
		}
	}
	.btn {
		display: flex;
		justify-content: center;
		// margin-top: 400rpx;
		margin-top: 200rpx;
		view {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align:center;
			border-radius: 40rpx;
			border: 1px solid #f6f6f6;
		}
	}
	.bar {
		position: fixed;
		top: 350rpx;
		left: 45rpx;
		z-index: 32;
		width: 660rpx;
		height: 20rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		background-color: rgba(0, 0, 0, .1);
	}
	.info {
		position: fixed;
		top: 360rpx;
		left: 65rpx;
		z-index: 33;
		width: 620rpx;
		// height: 400rpx;
		height: 200rpx;
		padding: 50rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		.info_t {
			text-align: center;
		}
	}
	.fs_24 {
		font-size: 24rpx;
	}
	.fs_28 {
		font-size: 28rpx;
	}
	.fs_30 {
		font-size: 30rpx;
	}
	.fs_36 {
		font-size: 36rpx;
	}
	.fs_48 {
		font-size: 48rpx;
	}
	.gray {
		color: #666666;
	}
	.bold {
		font-weight: bold;
	}
	.green {
		color: #40b312;
		border: 1px solid #40b312!important;
	}
	.ml_20 {
		margin-left: 20rpx;
	}
	.ml_50 {
		margin-left: 50rpx;
	}
	.mt_70 {
		margin-top: 70rpx;
	}
	.mt_30 {
		margin-top: 30rpx;
	}
</style>
